:root {
  --bPageBgColor: #f5f5f5;
  --bTextColor: #000;
  --bBgColor: var(--el-bg-color);
  --lBgColor: var(--bPageBgColor);
  --bBorderColor: var(--el-input-border-color);
  --bDialogBgColor: var(--el-dialog-bg-color);

  // single page use
  --roleHeaderBgColor: #f1f1f1;
  --selectRowBgColor: #e8f4ff;
}
html.light{
    --bPageBgColor: #f5f5f5;
    --bTextColor: #000;
    --el-bg-color-page: #f5f5f5;
    --el-bg-color: #fff;

    // single page use
    --roleHeaderBgColor: #f1f1f1;
    --selectRowBgColor: #fff;
    --testbgcolor: #fff;
}
html.dark {
  --bPageBgColor: #0a0a0a;
  --bTextColor: #fff;
   --el-bg-color-page: #0a0a0a;
   --el-bg-color: #141414;

  // single page use
  --roleHeaderBgColor: #0e0e0e;
  --selectRowBgColor: #414243;
  //--testbgcolor: #141414;
  --testbgcolor: #161616;

}
body {
  margin: 0;
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}

.fade-slide-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
